<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleSync"> 同步 </a-button>
        <a-button type="danger" @click="handleDeleteBatch"> 删除 </a-button>
      </template>
      <template #action="{ record }">
        <TableAction :actions="[
            {
              icon: 'ant-design:setting-outlined',
              onClick: handleMaintenance.bind(null, record),
              tooltip: '维护',
            },
            {
              icon: 'material-symbols:open-in-new-rounded',
              onClick: handleOpen.bind(null, record),
              tooltip: '打开',
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              popConfirm: {
                title: '是否确认删除',
                placement: 'leftBottom',
                confirm: handleDelete.bind(null, record),
              },
            },
          ]" />
      </template>
    </BasicTable>
    <ListModuleModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
import { defineComponent, h } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { columns, searchFormSchema } from './listModule.data';
import { getVisualDelModuleBatch } from '/@/api/formDesign/formDesign';
import { getVisualListModuleForMgr } from '/@/api/module/module';
import { useMessage } from '/@/hooks/web/useMessage';
import { useModal } from '/@/components/Modal';
import ListModuleModal from './listModuleModal.vue';
import { useGo } from '/@/hooks/web/usePage';

export default defineComponent({
  name: 'ListModule',
  components: { BasicTable, TableAction, ListModuleModal },
  setup() {
    const go = useGo();
    const { createMessage, createConfirm } = useMessage();
    const [registerTable, { reload, getSelectRowKeys }] = useTable({
      title: '模块管理',
      api: getVisualListModuleForMgr,
      columns,
      formConfig: {
        labelWidth: 120,
        schemas: searchFormSchema,
        autoSubmitOnEnter: true,
      },
      searchInfo: {
        op: 'search',
      }, //额外的参数
      rowSelection: {
        type: 'checkbox',
        columnWidth: 40,
      },
      clickToRowSelect: false,
      useSearchForm: true,
      showTableSetting: true,
      bordered: true,
      indexColumnProps: { width: 50 },
      showIndexColumn: true,
      rowKey: 'code',
      actionColumn: {
        width: 120,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
        fixed: undefined,
      },
    });

    async function handleDelete(record: Recordable) {
      await getVisualDelModuleBatch({ moduleCodes: record.code }).then(() => {
        handleSuccess();
      });
    }

    async function handleDeleteBatch() {
      let checkes = getSelectRowKeys();
      if (checkes.length == 0) {
        createMessage.warn('删除数据不能为空');
        return;
      }

      createConfirm({
        iconType: 'warning',
        title: () => h('span', '您确定删除么？'),
        onOk: async () => {
          let codes = checkes.join(',');
          await getVisualDelModuleBatch({ moduleCodes: codes });
          createMessage.success('操作成功');
          handleSuccess();
        },
      });
    }
    function handleSuccess() {
      reload();
    }

    const [registerModal, { openModal }] = useModal();

    function handleSync() {
      let checkes = getSelectRowKeys();
      if (checkes.length == 0) {
        createMessage.warn('请选择同步数据');
        return;
      }
      const moduleCodes = checkes.join(',');
      openModal(true, {
        isUpdate: false,
        record: {
          moduleCodes,
        },
      });
    }
    function handleMaintenance(record: Recordable) {
      go({
        path: '/managerPageSetup',
        query: {
          moduleCode: record.code,
          formCode: record.formCode,
          title: record.name,
          cacheName: `managerPageSetup${record.code}`,
        },
      });
    }
    //打开
    const handleOpen = (record) => {
      go({
        path: '/smartModulePage',
        query: {
          moduleCode: record.code,
        },
      });
    };
    return {
      registerTable,
      handleSync,
      handleDelete,
      handleSuccess,
      handleDeleteBatch,
      registerModal,
      handleOpen,
      handleMaintenance,
    };
  },
});
</script>
